<template>
  <!-- 查看详情 2018/3/7 11:44 zhangQ -->
  <div>
    <div>
      <Tabs :animated="false" v-model="currentName">
        <TabPane label="运单详情" name="1">
        </TabPane>
        <!--<TabPane label="主运单详情" name="2">-->
        <!--</TabPane>-->
        <TabPane label="轨迹跟踪" name="3">
        </TabPane>
        <!--<TabPane label="通知记录" name="4">-->
        <!--</TabPane>-->
      </Tabs>

      <!--运单详情-->
      <keep-alive>
        <div v-show="currentName=='1'">
          <tablePage ref="subOrderTab" :staticData="subOrderData" :isStartLoad="false" :mode="1" sortName="waybillNo" sortType="asc" :showSizer="true" :pageSizeOpts="pageSizeOpts">
            <template slot-scope="props">
              <Table :columns="subOrderColumn" border :data="props.data" @on-sort-change="props.sortChange" :height="subOrderTabHeight"></Table>
            </template>
          </tablePage>
        </div>
      </keep-alive>

      <!--<keep-alive>-->
      <!--&lt;!&ndash;主运单详情&ndash;&gt;-->
      <!--<div v-show="currentName=='2'">-->
      <!--<Steps :current="0" direction="vertical">-->
      <!--<template v-for="(item,index) in positionList">-->
      <!--<Step :title="item.info" :content="item.time"></Step>-->
      <!--</template>-->
      <!--</Steps>-->
      <!--</div>-->
      <!--</keep-alive>-->

      <keep-alive>
        <!--轨迹跟踪-->
        <div v-show="currentName=='3'">
          <Steps :current="0" direction="vertical">
            <template v-for="(item,index) in positionList">
              <Step :title="positionList.length-index+' '+item.info" :content="item.time" icon="android-radio-button-on"></Step>
            </template>
          </Steps>
        </div>
      </keep-alive>

      <!--通知记录-->
      <!--<keep-alive>-->
        <!--<div v-show="currentName=='4'">-->
          <!--<tablePage ref="noticeRecordTab" :staticData="noticeRecordData" :isStartLoad="false" :mode="1">-->
            <!--<template slot-scope="props">-->
              <!--<Table :columns="noticeRecordColumn" border :data="props.data" @on-sort-change="props.sortChange"></Table>-->
            <!--</template>-->
          <!--</tablePage>-->
        <!--</div>-->
      <!--</keep-alive>-->

    </div>
  </div>
</template>

<script>
  import { getChangjiPowerStationOrderDetail, getNoticeListByMainOrderNo } from '@api/backEnd/mainOrder'
  import tablePage from '@components/table/tablePage.vue'

  let requestMode = {
    realtime: 0,
    history: 1
  }

  export default {
    name: 'view-detail',
    data () {
      let subOrderColumn = [
        {
          title: '联运子运单号',
          ellipsis: 'false',
          key: 'subOrderNo',
          width: 200
        },
        {
          title: '货票号',
          key: 'waybillNo',
          sortable: true,
          width: 100
        },
        {
          title: '车号',
          key: 'trainNumber',
          sortable: true,
          width: 100
        },
        {
          title: '箱号字母',
          key: 'containerNoHead',
          width: 85
        },
        {
          title: '箱号',
          key: 'containerNoBody',
          width: 100
        },
        {
          title: '品名',
          key: 'zkpmhz0',
          width: 150
        },
        {
          title: '货票重量',
          key: 'zkzzl00',
          width: 100
        },
        // {
        //   title: '车队',
        //   ellipsis: 'false',
        //   key: 'fleetName',
        //   width: 100,
        //   render: (h, params) => {
        //     let thisdata = params.row.fleetName
        //     return h('Poptip', {
        //       props: {
        //         content: thisdata,
        //         placement: 'top',
        //         trigger: 'hover'
        //       }
        //     }, thisdata)
        //   }
        // },
        // {
        //   title: '司机',
        //   ellipsis: 'false',
        //   key: 'driverName',
        //   width: 100,
        //   render: (h, params) => {
        //     let thisdata = params.row.driverName
        //     return h('Poptip', {
        //       props: {
        //         content: thisdata,
        //         placement: 'top',
        //         trigger: 'hover'
        //       }
        //     }, thisdata)
        //   }
        // },
        {
          title: '车牌号',
          ellipsis: 'false',
          key: 'truckNo',
          width: 100,
          render: (h, params) => {
            let thisdata = params.row.truckNo
            return h('Poptip', {
              props: {
                content: thisdata,
                placement: 'top',
                trigger: 'hover'
              }
            }, thisdata)
          }
        },
        // {
        //   title: '磅单编号',
        //   ellipsis: 'false',
        //   key: 'poundNo',
        //   width: 100,
        //   render: (h, params) => {
        //     let thisdata = params.row.poundNo
        //     return h('Poptip', {
        //       props: {
        //         content: thisdata,
        //         placement: 'top',
        //         trigger: 'hover'
        //       }
        //     }, thisdata)
        //   }
        // },
        // {
        //   title: '绑定时间',
        //   ellipsis: 'false',
        //   key: 'bindTime',
        //   width: 150,
        //   render: (h, params) => {
        //     let thisdata = params.row.bindTime
        //     return h('Poptip', {
        //       props: {
        //         content: thisdata,
        //         placement: 'top',
        //         trigger: 'hover'
        //       }
        //     }, thisdata)
        //   }
        // },
        {
          title: '矿发重量',
          key: 'sendWeight',
          width: 150
        },
        {
          title: '毛重',
          ellipsis: 'false',
          key: 'mz',
          width: 100,
          render: (h, params) => {
            let thisdata = params.row.mz
            return h('Poptip', {
              props: {
                content: thisdata,
                placement: 'top',
                trigger: 'hover'
              }
            }, thisdata)
          }
        },
        {
          title: '毛重时间',
          ellipsis: 'false',
          key: 'mzsj',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.mzsj
            return h('Poptip', {
              props: {
                content: thisdata,
                placement: 'top',
                trigger: 'hover'
              }
            }, thisdata)
          }
        },
        {
          title: '皮重',
          ellipsis: 'false',
          key: 'pz1',
          width: 100,
          render: (h, params) => {
            let thisdata = params.row.pz1
            return h('Poptip', {
              props: {
                content: thisdata,
                placement: 'top',
                trigger: 'hover'
              }
            }, thisdata)
          }
        },
        {
          title: '皮重时间',
          ellipsis: 'false',
          key: 'pzsj1',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.pzsj1
            return h('Poptip', {
              props: {
                content: thisdata,
                placement: 'top',
                trigger: 'hover'
              }
            }, thisdata)
          }
        },
        {
          title: '净重',
          ellipsis: 'false',
          key: 'jz1',
          width: 100,
          render: (h, params) => {
            let thisdata = params.row.jz1
            return h('Poptip', {
              props: {
                content: thisdata,
                placement: 'top',
                trigger: 'hover'
              }
            }, thisdata)
          }
        }

      ]
      let noticeRecordColumn = [
        {
          title: '车队名称',
          ellipsis: 'false',
          key: 'fleetName'
        },
        {
          title: '送货地址',
          ellipsis: 'false',
          key: 'addresses'
        }
      ]
      let subOrderData = []
      let positionList = []
      let noticeRecordData = []
      let currentName = '1'
      let subOrderTabHeight = 550
      let pageSizeOpts = [150, 100, 50]
      let datas = { currentName, subOrderColumn, subOrderData, positionList, noticeRecordColumn, noticeRecordData, subOrderTabHeight, pageSizeOpts }
      return datas
    },
    props: {
      mode: {
        type: Number,
        default () {
          return requestMode.realtime
        }
      },
      currentMainOrder: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {},
    methods: {
      onSortChange () {
      },
      /**
       * TODO(获得子运单信息)
       * @auther zhangQ
       * @date 2018/3/16 15:40
       **/
      getSubOrderData () {
        if (!(this.currentMainOrder && this.currentMainOrder.orderNo)) {
          return
        }
        let param = {
          orderNo: this.currentMainOrder.orderNo,
          mode: this.mode
        }
        getChangjiPowerStationOrderDetail(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.subOrderData = res.data.data.sub
            this.positionList = res.data.data.position
            if (this.subOrderData && this.subOrderData > 0) {
              this.subOrderTabHeight = 500
            }
          } else {
            Promise.reject(new Error(res.data.res))
          }
        }).catch((err) => {
          console.log('接口getOrderDetail:' + err)
        })
      },
      getNoticeListByMainOrderNo () {
        let param = {
          orderNo: this.currentMainOrder.orderNo
        }
        getNoticeListByMainOrderNo(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.noticeRecordData = res.data.data
          }
        })
      }
    },
    mounted () {
      this.getSubOrderData()
      // this.getNoticeListByMainOrderNo()
    },
    components: { tablePage }
  }
</script>
